<style lang="less">
    @import './style.less';
</style>
<template>
    <div class="user">
        <div class="op-header">
            <el-button
                    v-has="110203"
                    class="add"
                    type="info"
                    @click="add">

                <i class="el-icon-circle-plus icon-right" />新增管理员
            </el-button>
            <div class="search">
                <el-cascader
                        class="enable-select"
                        :clearable="true"
                        v-model="enableValue"
                        :options="enableOptions"
                        :props="cascaderProps"
                        placeholder="启用状态" />
                <el-cascader
                        :clearable="true"
                        change-on-select
                        class="department-select"
                        v-model="departmentValue"
                        :options="organizations"
                        :props="cascaderProps"
                        placeholder="所属部门" />
                <el-input
                        class="search-input "
                        v-model="searchInput"
                        placeholder="请输入查询关键字"
                        prefix-icon="el-icon-search" />
                <el-button
                        class="search-button"
                        type="primary"
                        @click="search">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
        <table-ex
                :rows="users"
                :total="usersTotal"
                :columns="columns"
                :options="options"
                :on-option="onClickOption"
                :on-operation="onClickOperation"
                :on-page-change="onPageChange" />
        <dialog-ex
                v-if="!!dialogModal"
                :title="dialogTitle"
                :mode="dialogModal"
                :form="form"
                :tree-data="organizations"
                :ctrl-values="organizations"
                :init="currentUser"
                :search-data="roles" />
    </div>
</template>

<script>
    import { mapActions, mapGetters, mapMutations } from 'vuex'
    import pageConfig from './config'

    import tableEx from '@/components/table/tableEx'
    import dialogEx from '@/components/dialog/dialogEx'

    export default {
        name: 'user',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                searchInput: '',
                dialogModal: '',
                dialogTitle: '',
                enableValue: [],
                departmentValue: [],
                currentUser: null,
                cascaderProps: {
                    value: 'id',
                    label: 'title',
                    children: 'children'
                },
                enableOptions: pageConfig.enableOptions,
                columns: pageConfig.columns,
                options: pageConfig.options,
                form: {
                    items: [],
                    actions: {
                        cancel: () => {
                            this.dialogModal = ''
                        },
                        confirm: (data, mode) => {
                            if (mode === 'edit') {
                                this.editUser(data)
                            } else {
                                if ((data.password === data.confirmPassword) && (data.password && data.confirmPassword)) {
                                    this.addUser(data)
                                    this.dialogModal = ''
                                } else {
                                    this.$Message({
                                        type: 'warning',
                                        center: true,
                                        message: '请确认密码填写正确'
                                    })
                                }
                            }
                        }
                    }
                }
            }
        },

        computed: {
            ...mapGetters([
                'users',
                'roles',
                'usersTotal',
                'organizations'
            ])
        },

        created() {
            this.loadData()
        },

        methods: {

            ...mapActions([
                'getUsers',
                'getRoles',
                'addUser',
                'editUser',
                'removeUser',
                'getOrganizations'
            ]),

            ...mapMutations(['SETUSERPAGE']),

            loadData() {
                this.getUsers()
                this.getRoles()
                this.getOrganizations()
            },

            add() {
                this.form['items'] = pageConfig.addFormItems
                this.dialogModal = 'add'
                this.dialogTitle = '新增管理员'
            },

            search() {
                const filter = {
                    name: this.searchInput ? this.searchInput : null,
                    enabled: !!this.enableValue ? this.enableValue[0] : null,
                    orgIds: this.departmentValue && this.departmentValue.length > 0 ? [this.departmentValue[this.departmentValue.length - 1]] : null
                }
                this.SETUSERPAGE({
                    number: 1,
                    filter
                })
                this.getUsers()
            },

            onClickOption(option, rows) {
                if (option === 'batchrefresh') {
                    this.loadData()
                } else {
                    let lIds = rows.map(item => {
                        return item.userId
                    })
                    this.removeUser({ lIds })
                }
            },

            onClickOperation(oper, row) {
                let type = oper.prop
                this.currentUser = row
                switch (type) {
                    case 'edit':
                        this.dialogModal = 'edit'
                        this.dialogTitle = '编辑管理员'
                        this.form['items'] = pageConfig.editFormItems
                        break
                    case 'delete':
                        let params = {
                            lIds: [this.currentUser.employeeId]
                        }
                        this.removeUser(params)
                        break
                    default:
                        this.dialogModal = 'edit'
                        this.dialogTitle = '重置密码'
                        this.form['items'] = pageConfig.passwordFormItems
                }
            },

            onPageChange(number) {
                this.SETUSERPAGE({ number })
                this.getUsers()
            }
        }
    }
</script>
